<template>
	<div class="flower">
		<Header></Header>
		<Swiper></Swiper>
		<ul class="flower-list">
			<div class="ul-row1">
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe60d;</i><span>盆栽绿植</span></a></li>
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe60a;</i><span>鲜花花束</span></a></li>
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe60c;</i><span>我要充值</span></a></li>
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe647;</i><span>天天拼团</span></a></li>
			</div>

			<div class="ul-row2">
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe822;</i><span>花器花具</span></a></li>
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe640;</i><span>鲜花卡</span></a></li>
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe609;</i><span>新品上架</span></a></li>
				<li><a href="javascript:void(0)"><i class="iconfont">&#xe607;</i><span>限时抢购</span></a></li>
			</div>				
		</ul>
		<div class="main-content" >		 
			<div class="hot-tuijian">
				<h3><span>热卖推荐</span></h3>
				<Swiper1></Swiper1>
			</div>
			
			<div :class="item.className" v-for="(item,index) in arrList">
				<h3><span>{{item.tit}}</span></h3>
				<ul>
					
					<li v-for="(i,ind) in item.mincontent">
						<router-link :to="'/flocoentmin/'+i.id">
						<div class="imgbox"><img :src="i.src"></div>
						</router-link>
						<p>{{i.p}}</p>
						<h5>{{i.mintext}}</h5>
						<h3>{{i.price}}</h3>
					</li>
					
				</ul>
				<button>查看全部</button>
			</div>
			
		</div>
		
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.flower{
		background:#F8F8FF;
		padding-bottom: 53px;
	}
	.flower-list{
		overflow: hidden;
		background: #fff;
	}
	.hot-tuijian{
		margin-bottom: 14px;	
	}
	.ul-row1,.ul-row2{
		display: flex;
		margin: 20px 0;
	}
	.ul-row1 li,.ul-row2 li{
		display: flex;
		align-items: center;
		justify-content: center;
		flex:1;
	}
	a{
		flex-direction: column;
		display: flex;
		color: #8B8B7A;		
		i{
			font-size:30px;
			margin: 4px 0;
			vertical-align: bottom;
		}
		span{
			font-size:14px;
		}
	}
	.main-content{
		position: relative;
		margin-top: 14px;
		>div{
			background: #fff;
			>h3:before{
				content: " ";
				width: 30px;
				height: 1px;
				color: #000;
				position: absolute;
				top: 50%;
				left: -50px;
				display: block;
				background: #000;
			}
			>h3:after{
				content: " ";
				width: 30px;
				height: 1px;
				color: #000;
				position: absolute;
				top: 50%;
				right: -50px;
				display: block;
				background: #000;
			}

			>h3{
				font-weight: normal;
				text-align: center;
				padding: 10px 0;
				font-size: 16px;
				position: relative;
				display: inline-block;
				font-weight: normal;
				width: auto;
				margin:0 auto;
				span{
					position: relative;
				}
				span:before{
					content:'';
					height: 4px;
					width: 4px;
					transform: rotate(45deg);
					background: #000;
					position: absolute;
					top: 50%;
					margin-top: -2px;
					left: -10px;
					display: block;
				}
				span:after{
					content:'';
					height: 4px;
					width: 4px;
					transform: rotate(45deg);
					background: #000;
					position: absolute;
					right: -10px;
					display: block;
					top: 50%;
					margin-top: -2px;
				}
			}			

		}
			
		.midbox{
			ul{
				overflow: hidden;
			}
			li{
				float: left;
				width: 48%;
				margin:4px 0.8%;
				text-align: left;
				border-bottom: 0.3px solid rgba(0,0,0,.3);
				box-shadow: 0.3px 0 0 0 rgba(0,0,0,.3);
				 p{
			 	font-size: 14px;
			 	color: #000;
			 	padding: 6px 4px;
				 }
				 h5{
				 	font-size: 12px;
				 	font-weight: normal;
				 	padding: 2px 4px;
				 	color: #A9A9A9;
				 }
				 h3{
				 	color: #22887d;
				 	text-align: left;
				 	font-size: 13px;
				 	padding: 4px 4px;
				 	font-weight: normal;
				 }
				  .imgbox{
				 	width:100%;
				 	height: 50vw;
				 	img{
				 		width: 100%;
				 		height: 100%;
				 	}
				 }
			}
			button{
				 	background: #fff;
				 	border: none;
				 	border: 0.5px solid #A9A9A9;
				 	height: auto;
				 	width: 80px;
				 	padding: 4px 6px;
				 	margin:14px auto;
				 	display: block;
				 	cursor: pointer;
				 	font-size: 14px;
				 	border-radius: 4px;
				 	text-align: center;
				 	color: #A9A9A9;
				 	position: relative;
				 	bottom: 7px;
				 }				
		}
		.con-div4{
			margin-bottom: 0;
		}
	}
</style>

<script type="text/javascript">
	import Swiper from './base/Swiper'
	import Header from './base/Header'
	import Swiper1 from './base/Swiper1'
	export default{
		data(){
			return{
				arrList:[]
			}
		},
		components:{
			Swiper,
			Header,
			Swiper1
		},
		methods:{
			getData(){
				var _this=this;
				_this.$http.get('../../static/data/flower.json').then(function(res){
					_this.arrList=res.data;
				}).catch(function(err){
					//console.log(err)
				})
			}
		},
		mounted(){
			this.getData()
		}
	}
</script>